<template>
    <div class="content">
      <el-upload
        ref="base"
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="preview"
        :on-remove="remove"
        :file-list="fileList">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submit">上传到服务器</el-button>
      <el-dialog :visible.sync="Visible">
        <img width="100%" :src="ImageUrl" alt="">
      </el-dialog>
    </div>
  </template>
  
  <script>
    export default {
      props:{
        fileList:{
            type:Array,
            defalut:function(){
                return []
            }
        }
      },
      data() {
        return {
          ImageUrl: '',
          Visible: false,
        };
      },
      methods: {
        submit() {
            this.$refs.base.submit();
        },
        remove(file, files) {
          console.log(file, files);
        },
        preview(file) {
          this.ImageUrl = file.url;
          this.Visible = true;
        }
      }
    }
  </script>
  
  <style>
  
  </style>